<template>
    <div class="col-md-9 left-col">
        <div class="panel panel-default padding-md">
            <div class="panel-body">
                <h2><i class="fa fa-picture-o"></i> 请输入头像地址</h2>
                <hr>
                <div data-validator-from>
                    <div class="form-group">
                        <label>头像预览：</label>
                        <div>
                            <img :src="avatar" class="avatar-preview-img">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-8">
                            <input v-model.trim.lazy="avatar" v-validator.required="{ title: '头像地址'}" type="text" class="form-control avatar-input">
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-lg btn-primary" @click="updateAvatar">上传头像</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'EditAvatar',
    data() {
        return {
            avatar: '' // 头像地址
        }
    },
    // 在实例创建完成后，初始化头像地址的值
    created() {
        // 获取仓库的用户信息
        const user = this.$store.state.user
        // 将仓库的用户头像赋值给当前头像地址
        if (user && typeof user === 'object') {
            this.avatar = user.avatar
        }
    },
    methods: {
         // 更新头像
        updateAvatar() {
            const avatar = this.avatar

            // 如果头像地址不为空
            if (avatar) {
                 // 新建一个 Image 的实例
                let img = new Image()

                // 加载成功时，上传图片
                img.onload = () => {
                    // 依然分发一个 updateUser 的事件，这里只需传入头像信息
                    this.$store.dispatch('updateUser', {avatar})
                    this.$message.show('上传成功')
                }

                // 加载失败时，只显示一个失败的提示
                img.onerror = () => {
                    this.$message.show('上传失败', 'danger')
                }
            
                // 指定图片地址  
                img.src = avatar
            }
        }
    }
}
</script>

<style scoped>
    .avatar-preview-img { min-width: 200px; min-height: 200px; max-width: 50%;}
</style>


